<template>
  <div>
    <div class="hotel-booking">
      <div class="header">
        <div class="back-btn" @click="goBack">
          <i class="icon-back"></i>
        </div>

      </div>
      <img src="../../../static/images/img.jpg" :alt="酒店预订" width="100%" height="400px">
      <div class="tab-bar">
        <div
            class="tab-item"
            :class="{ active: selectedTab === 'domestic' }"
            @click="selectTab('domestic')"
        >
          国内
        </div>
        <div
            class="tab-item"
            :class="{ active: selectedTab === 'guesthouse' }"
            @click="selectTab('guesthouse')"
        >
          民宿公寓
        </div>
        <div
            class="tab-item"
            :class="{ active: selectedTab === 'hourly' }"
            @click="selectTab('hourly')"
        >
          钟点房
        </div>
        <div
            class="tab-item"
            :class="{ active: selectedTab === 'overseas' }"
            @click="selectTab('overseas')"
        >
          海外
        </div>
      </div>
      <div class="content">
        <div class="location">
          <div class="city">北京</div>
          <div class="current-location">
            <i class="icon-location"></i>
            当前位置
          </div>
        </div>
        <div class="date">
          <div class="check-in">
            今天入住
            <br>
            10月18日 周三
          </div>
          <div class="check-out">
            明天离店
            <br>
            10月19日 周四
            <span class="total-nights">共1晚 ></span>
          </div>
        </div>
        <div class="search-bar">
          <i class="icon-search"></i>
          <input type="text" placeholder="搜索民宿/地点/关键词" v-model="form.form">
        </div>
        <div class="filter">
          <div class="filter-item">
            设置价格/星级
          </div>
          <div class="filter-item">
            1间 - 1成人 - 0儿童 >
          </div>
        </div>
        <div class="search-btn" @click="getJiudian">
          查找
        </div>
        <div>
          <div class="title" style="left:500px">猜你喜欢</div>
        </div>
        <div class="tab-waite">
          <div class="tab-item" :class="{ active: activeTab === 'recommend' }" @click="changeTab('recommend')">推荐</div>
          <div class="tab-item" :class="{ active: activeTab === 'nearby' }" @click="changeTab('nearby')">附近5公里</div>
          <div class="tab-item" :class="{ active: activeTab === 'family' }" @click="changeTab('family')">亲子</div>
          <div class="tab-item" :class="{ active: activeTab === 'tonight' }" @click="changeTab('tonight')">今晚特价</div>
        </div>
        <div class="hotel-list">
          <div class="hotel-item" v-for="(hotel, index) in hotels" :key="hotels.id" @click="goToHotelDetail(hotel.id)">
            <div class="hotel-img-container">
              <img :src="hotel.imageUrl"  class="hotel-img">
            </div>
            <div class="hotel-info">
              <div class="hotel-name">{{ hotel. hotelName }}</div>
              <div class="hotel-desc">{{ hotel.desb }}</div>
              <div class="hotel-price">
                <span class="current-price">¥{{ hotel.pricePerNight }}</span>
                <span class="original-price">¥{{ hotel.ooo }}</span>
                <span class="consumption">{{ hotel.consumption }}+消费</span>
              </div>
              <div class="hotel-tips">{{ hotel.tips }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

import axios from "axios";


export default {
  data() {
    return {
      activeTab: 'recommend',
      selectedTab: 'guesthouse',
      hotels:[],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      },
      form:{},

    };
  },
  methods: {
    goBack() {
      // 这里可以添加返回上一页的逻辑
      alert('返回上一页');
    },
    selectTab(tab) {
      this.selectedTab = tab;
    },
    searchHotels() {
      // 这里可以添加搜索酒店的逻辑
      alert('查找酒店');
    },
    changeTab(tab) {
      this.activeTab = tab;
    },
    //跳转酒店详情页面
    goToHotelDetail(id) {
      console.log("跳转页面前的房间id")
      console.log(id)
      this.$router.push({ name: 'about',query:{id:id}})
    },
    getJiudian(){
      axios.post('http://localhost:1000/hotel/findAll',this.form)
          .then(response => {
            // 处理获取到的数据
            this.hotels = response.data.data;
            console.log(this.hotels);
          })
          .catch(error => {
            // 处理错误
            console.error(error);
          });
    },
  },
  created() {
    this.getJiudian();

  }
};
</script>
<style scoped>
.hotel-booking {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: rgba(0, 122, 255, 0.02);
  color: white;
}
.back-btn,
.more-btn {
  font-size: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.banner {
  height: 200px;
  overflow: hidden;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tab-waite {
  display: flex;
  justify-content: space-around;
  background-color: rgba(240, 240, 240, 0.07);
  padding: 10px 0;

}
.tab-item {
  padding: 5px 10px;
  border-radius: 5px;
}
.tab-item.active {
  background-color: rgba(0, 122, 255, 0);
  color: white;
}
.content {
  flex: 1;
  padding: 10px;
}
.location {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.city {
  font-size: 16px;
  font-weight: bold;
}
.current-location {
  display: flex;
  align-items: center;
}
.icon-location {
  margin-right: 5px;
}
.date {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.check-in,
.check-out {
  text-align: center;
}
.total-nights {
  color: rgba(0, 122, 255, 0.96);
  font-weight: bold;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  background-color: #F0F0F0;
  border-radius: 5px;
}
.icon-search {
  margin-right: 5px;
}
input[type="text"] {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
}
.filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.filter-item {
  padding: 5px 10px;
  background-color: #F0F0F0;
  border-radius: 5px;
}
.search-btn {
  background-color: #007AFF;
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
}

.tab-item.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

.hotel-info {
  padding: 10px;
}

.hotel-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.hotel-desc {
  color: #666;
  margin-bottom: 10px;
}

.hotel-price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.current-price {
  font-size: 18px;
  color: #ff5722;
  margin-right: 5px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.consumption {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.hotel-tips {
  font-size: 12px;
  color: #666;
}
.hotel-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.hotel-item {
  width: calc(50% - 10px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.hotel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  right: 0;
  top:0;
}
.hotel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hotel-item {
  width: calc(50% - 5px); /* 每个酒店项占父容器宽度的一半，减去 gap 的一半 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.hotel-img-container {
  width: 100%;
  height: 150px; /* 图片容器高度，可根据需要调整 */
  overflow: hidden;
}

.hotel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-info {
  padding: 10px;
}

.hotel-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.hotel-desc {
  color: #666;
  margin-bottom: 10px;
}

.hotel-price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.current-price {
  font-size: 18px;
  color: #ff5722;
  margin-right: 5px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.consumption {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.hotel-tips {
  font-size: 12px;
  color: #666;
}
</style>
